import React, { Component, } from 'react'
import { List } from 'antd'
import {RightCircleOutlined} from '@ant-design/icons'
import '../static/css/musiclist.css'
import { withRouter } from 'react-router-dom'


class MusicList extends Component {
    render() {
        return (
            <div id="music_list_app">
                 <List
                    className="demo-loadmore-list"
                    itemLayout="horizontal"
                    dataSource={this.props.pn}
                    renderItem={item => (
                    <List.Item actions={[
                        <RightCircleOutlined onClick={()=>{this.props.history.push('/play/'+item.id)}}/>
                    ]}>
                        {item.name}
                    </List.Item>
                    )}
                />
            </div>
        )
    }
}

export default withRouter(MusicList)